import type { BingElements } from '../../../../../../../../types/constants/personalization/bing'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { BingCommonPage } from './common'

export class BingIndexPage {
  elements: BingElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BING]
  private static instance: BingIndexPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly commonPage: BingCommonPage = BingCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BingIndexPage {
    if (!BingIndexPage.instance) {
      BingIndexPage.instance = new BingIndexPage()
    }
    return BingIndexPage.instance
  }

  init(): void {
  }

  hideSearchStyles(): string {
    return `
    border-radius: 24px !important;
    
    #sw_as {
      display: none !important;
    }
    `
  }

  getMainStyles(): string {
    return `
    /* 隐藏样式 */
    &:has(${generateHideSelector('header.header .head_cont')}):has(${generateHideSelector('header.header .identity_wrapper')}) {
      #hp_app header.header {
        background-color: transparent !important;
      }
    }
    &:has(${generateHideSelector('header.header .identity_wrapper')}) {
      #hp_app header.header .head_cont {
        margin: 0 auto !important;
      }
    }
    
    /* 搜索历史隐藏、搜索建议隐藏 */
    &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
      form#sb_form {
        ${this.hideSearchStyles()}
      }
    }
    /* 搜索历史隐藏、搜索建议显示 */
    &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
      /* 无搜索建议 */
      form#sb_form[${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
        ${this.hideSearchStyles()}
      }
    }
    /* 搜索历史显示、搜索建议隐藏 */
    &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
      /* 无搜索历史 */
      form#sb_form[${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
        ${this.hideSearchStyles()}
      }
    }
    
    /* 主样式 */
    #hp_app {
      .hp_body {
        background-color: transparent !important;
        
        /* 隐藏封面 */
        .hp_top_cover_container, .hp_media_container {
          display: none !important;
        }

        .hp_top_cover_container {
          &::before {
            background: transparent !important;
          }
        }

        header.header {
          background-color: var(${this.themeVarService.search.header.background}) !important;
          margin: 0 !important;
          padding: 10px 24px !important;
          
          .head_cont {
            margin-right: auto !important;
            .scope_cont {
              > ul {
                > li {
                  > a {
                    color: var(${this.themeVarService.search.default.text}) !important;
                    
                    &:hover {
                      color: var(${this.themeVarService.link.default.text}) !important;
                    }
                  }
                }
              }
            }
          }
          
          .identity_wrapper {
            margin-left: auto !important;
            
            #id_s {
              color: var(${this.themeVarService.search.default.text}) !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.text}) !important;
              }
            }
            
            .points-container {
              color: var(${this.themeVarService.search.default.text}) !important;
            }
          }
        }
        
        /* 遮罩 */
        .dimmer {
          height: 0 !important;
          width: 0 !important;
        }
        
        /* 搜索建议高亮 */
        #sb_form #sw_as #sa_sug_block ul li {
          &:hover {
            .sa_tm span strong {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
          .sa_tm span:has(strong) {
            color: var(${this.themeVarService.em.text}) !important;
            
            strong {
              color: var(${this.themeVarService.search.suggestions.text}) !important;
              font-weight: ${this.themeVarService.search.suggestions.fontWeight} !important;
            }
          }
        }
        
        ${this.commonPage.switchBaseStyles()}
      }
    }
    `
  }
}
